<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<div id="box">Hello JQuery</div>
		<script src="../jquery-1.12.4.min.js"></script>
		<script>
			/*原生JS实现*/
			/*var div = document.getElementById('box');
			div.onmouseover = function() {
				this.style.background = 'gold';
			};
			div.onmouseleave = function() {
				this.style.background = 'white'
			}*/
			/*用JQuery实现*/
			/*$('#box').mouseover(
				function() {
					$('div').css('background', 'greenyellow');
				}
			);
			$('div').mouseout(
				function() {
					$('div').css('background', 'white');
				}
			);*/
			/*JQuery同时绑定多个事件*/
			$('div').on(
				{
					mouseover:function(){
						$('div').css('background','brown');
					},
					mouseout:function(){
						$('div').css('background','yellow');
					},
					click:function(){
						$('div').css('background','blue');
					}
				}
			)
			
			
			
			
		</script>
	</body>

</html>